<template>
  <t-modal :title="title" :width="640" :visible="visible" :switchFullscreen="true" :confirmLoading="loading" @ok="
      () => {
        $emit('ok');
      }
    " @cancel="
      () => {
        $emit('cancel');
      }
    ">
    <a-spin :spinning="loading">
      <a-form :form="form">
        <a-row :gutter="16">
          <a-form-item class="hiddenItem">
            <!-- uuid隐藏 -->
            <a-input v-decorator="['id']" disabled type="hidden"/>
          </a-form-item>
          <a-col class="gutter-row" :span="24">
            <a-form-item label="参数名" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['paramsName', { rules: [{ required: true, message: '必填' }] }]"/>
            </a-form-item>
          </a-col>
          <a-col class="gutter-row" :span="24">
            <a-form-item label="数据类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['type', { rules: [{ required: true, message: '必填' }] }]"/>
            </a-form-item>
          </a-col>
          <a-col class="gutter-row" :span="24">
            <a-form-item label="默认值" :labelCol="labelCol" :wrapperCol="wrapperCol">
              <a-input v-decorator="['paramsValue']"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </t-modal>
</template>

<script>
  import pick from "lodash.pick";
  // 表单字段
  const fields = [
    "id",
    "paramsName",
    "type",
    "paramsValue",
  ];

  export default {
    props: {
      visible: {
        type: Boolean,
        required: true,
      },
      loading: {
        type: Boolean,
        default: () => false,
      },
      model: {
        type: Object,
        default: () => null,
      },
    },
    data() {
      return {
        title: "",
        labelCol: {
          xs: {
            span: 24,
          },
          sm: {
            span: 5,
          },
        },
        wrapperCol: {
          xs: {
            span: 24,
          },
          sm: {
            span: 16,
          },
        },
        databaseTypeList: [{
          value: 'MySQL',
          id: 1,
          label: 'MySQL'
        }, {
          value: 'Oracle',
          id: 1,
          label: 'Oracle'
        },
        ],
        form: this.$form.createForm(this),
      };
    },
    methods: {
      add(m, data) {
        this.form.resetFields()
        console.log(m, data);
      },
      edit(m, data) {
        console.log(m, data);
      },
    },
    created() {
      // 防止表单未注册
      fields.forEach((v) => this.form.getFieldDecorator(v));
      // 当 model 发生改变时，为表单设置值
      this.$watch("model", () => {
        this.model && this.form.setFieldsValue(pick(this.model, fields));
      });
    },
  };
</script>
